<template>
  <div style="margin-top: 40px">
    <div class="index-chart">
      <div class="index-chart-top">
        <div id="one" style="width: 600px;height:400px;"></div>
        <div id="two" style="width: 600px;height:400px;"></div>
      </div>
      <div class="index-chart-bottom">
        <div id="three" style="width: 600px;height:400px;"></div>
        <div id="four" style="width: 600px;height:400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'CaseStatistics'
}

setTimeout(function () { // 在dom初始化后再初始化图表
  var myChart = echarts.init(document.getElementById('one'))

  // 指定图表的配置项和数据
  var option1 = {
    title: {
      text: '柱状图'
    },
    tooltip: {},
    legend: {
      data: ['销量', '检测数量']
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 25, 30, 40, 12, 15, 18]
    }, {
      name: '检测数量',
      type: 'bar',
      data: [10, 23, 14, 15, 16, 19, 29, 27, 10, 19, 33, 44]
    }]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1)

  myChart = echarts.init(document.getElementById('two'))
  // 指定图表的配置项和数据
  var option2 = {
    title: {
      text: '折线图'
    },
    tooltip: {},
    legend: {
      data: ['销量', '检测数量']
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20, 25, 30, 40, 12, 15, 18]
    }, {
      name: '检测数量',
      type: 'bar',
      data: [10, 23, 14, 15, 16, 19, 29, 27, 10, 19, 33, 44]
    }]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option2)

  myChart = echarts.init(document.getElementById('three'))
  // 指定图表的配置项和数据
  var option3 = {
    title: {
      text: '饼状图'
    },
    tooltip: {},
    legend: {
    },
    series: [{
      type: 'pie',
      center: ['50%', 100],
      radius: 50,
      data: [
        {name: '1月', value: 30},
        {name: '2月', value: 60},
        {name: '3月', value: 30}
      ]
    }]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option3)
}, 0)
</script>

<style scoped>
.index-chart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.index-chart-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.index-chart-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
